<template>
  <div class="index">
    <div class="head-right">
      <img src="../../assets/logo.png" alt />
      <router-link v-if="isshow" to="/" style="color:#f57d13">登录/</router-link>
      <router-link v-if="isshow" to="/register" style="color:#f57d13">注册</router-link>
    </div>
    <div style="height:160px">
      <cube-slide ref="slide" :speed="100" :data="items" @change="changePage">
        <cube-slide-item
          v-for="(item, index) in items"
          :key="index"
          @click.native="clickHandler(item, index)"
        >
          <a href="javascript:;">
            <img :src="item.path" />
          </a>
        </cube-slide-item>
      </cube-slide>
    </div>
    <div class="notice">
      <img class="laba" src="../../assets/laba.png" alt />
      <marquee v-if="artical.length>0" class="gd" behavior direction v-html="artical">
        <!-- <div v-for="(item, index) in artical">
          <span>{{item.title}}</span>
        </div>-->
      </marquee>
    </div>
    <div class="gary-color"></div>
    <div class="gfgg">
      <router-link to="/newlist" class="bzzx">
        <img src="../../assets/i_icon1.png" alt />
        <p>官方公告</p>
      </router-link>
      <router-link to="/help" class="bzzx">
        <img src="../../assets/i_icon2.png" alt />
        <p>帮助中心</p>
      </router-link>
      <a href="#/otc" @click="msg" class="bzzx">
        <img src="../../assets/i_icon3.png" alt />
        <p>充币</p>
      </a>
      <a href="#/addmoney" @click="msg" class="bzzx">
        <img src="../../assets/i_icon4.png" alt />
        <p>提币</p>
      </a>
      <a href="https://fir.im/6x4m" class="bzzx">
        <img src="../../assets/i_icon5.png" alt />
        <p>APP下载</p>
      </a>
    </div>
    <div class="gary-color"></div>
    <div class="i_paihang">
      <div class="title">排行</div>
      <div class="mian">
        <ul class="a-title">
          <li class="cell-4">币种</li>
          <li class="cell-5">最新价(USDT)</li>
          <li class="cell-3">
            <span>涨跌幅</span>
          </li>
        </ul>
        <div class="content">
          <ul class="b-title" v-for="(item, index) in itemss" :key="index">
            <li class="cell-4">
              <div>
                <p>
                  <span class="f1">{{item.title}}</span>
                  <span class="f2">/USDT</span>
                </p>
                <!-- <p class="f3">24H量 {{item.baseVolume}}</p> -->
              </div>
            </li>
            <li class="cell-5">
              <p class="f1">{{item.last}}</p>
              <p class="f2">≈ {{item.cny}} CNY</p>
            </li>
            <li class="cell-3">
              <router-link
                :to="{
                            path: 'index_kline',
                            params: {
                                bidui: item.title+'_'+item.title1, // orderNum : this.searchData.orderNo
                            },
                            query: {
                                bidui: item.title+'_'+item.title1, // orderNum : this.searchData.orderNo,
                            }
                        }"
              >
                <span
                  class="red-btn"
                  v-if="Number(item.percentChange)>0"
                  style="background:#1BC492"
                >{{item.percentChange}}%</span>
                <span class="red-btn" v-else style="background:#EC7248">{{item.percentChange}}%</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="0" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";

export default {
  name: "index",
  components: {
    Tabbar
  },
  data() {
    return {
      isshow: true,
      items: [],
      itemss: [],
      artical: []
    };
  },

  created: function() {




//   var ws = new WebSocket("ws://47.106.102.130:3388");
// // 服务端主动推送消息时会触发这里的onmessage
//   ws.onmessage = function(e){
//     console.log(e, '----hode')
//       // json数据转换成js对象
//       var data = eval("("+e.data+")");
//       var type = data.type || '';
//       switch(type){
//           // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
//           case 'init':
//               // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
//               $.post('./bind.php', {client_id: data.client_id}, function(data){}, 'json');
//               break;
//           // 当mvc框架调用GatewayClient发消息时直接alert出来
//           default :
//               alert(e.data);
//       }
//   };










    this.$axios.post("/index/usercenter/carousels")
    .then(res=>{
      this.items=res.data.info
      console.log(res.data,'轮播图')
    })
    var sess = sessionStorage.getItem("islogin");
    var cokie = document.cookie;
    if (sess != null || cokie.split("islogin=true").length > 1) {
      this.isshow=false;
    } else {
      this.isshow=true;
    }
    var start = this.$store.state.index;
    console.log(start, "执行");
    if (start) {
      this.artical = start.artical;
      this.itemss = start.itemss;
    }
    this.getDate1();
    this.getDate();
  },
  mounted() {},
  methods: {
    changePage(current) {
      // console.log('当前轮播图序号为:' + current)
    },
    clickHandler(item, index) {
      // console.log(item, index)
    },
    getDate1() {
      this.$axios.post("/index/apiindex/articleList", {}).then(res => {
        console.log(res);
        if (res.data.info.length > 0) {
          var list = "";
          for (var i = 0; i < res.data.info.length; i++) {
            list += '<span style="margin-right:2rem">';
            list +=
              '<a style=" display: inline-block;height: 0.6rem;line-height: .6rem;color:black" href="#/news?id=' +
              res.data.info[i].article_id +
              '">';
            list += res.data.info[i].title;
            list += "</a>";
            list += "</span>";
          }
          this.artical = list;
        }
      });
    },
    // tiao(s){
    //   this.$router.push("/index_kline?bidui="+s);
    // },
    getDate() {
      // var page = 1;
      // var limit = 10;
      // this.$axios.post("index/apihq/articleList1",{})
      this.$axios.post("/index/apihq/markect", { types: "usdt" }).then(res => {
        console.log(res);

        if (res.data.list.length > 0) {
          this.itemss = res.data.list;
        }
      });
    },

    msg() {
      // this.$createToast({ txt: "请到OTC交易", type: "txt", time: 1200 }).show();
    }
  },

  //销毁数据保留this.$store.commit("start","聊聊")
  beforeDestroy() {
    var json = {
      artical: this.artical,
      itemss: this.itemss
    };
    this.$store.commit("start", json);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.cube-slide-item > a > img {
  width: 100%;
}
.gary-color {
  background: #e7e8ee;
  height: 0.16rem;
}
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.f-padding {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.index {
  .head-right {
    position: relative;
    height: 1.173333rem;
    text-align: right;
    margin-right: 0.426667rem;
    line-height: 1.173333rem;
    color: #f57d13;
    font-size: 0.4rem;
    img {
      width: 0.8rem;
      position: absolute;
      left: 0.1rem;
      top: 0.18rem;
    }
  }
  .lbt {
    width: 100%;
    height: 4.266667rem;
  }
  .notice {
    .f-flex();
    height: 1.333333rem;
    .laba {
      width: 0.373333rem;
      height: 0.4rem;
      margin-left: 0.4rem;
    }
    .gd {
      font-size: 0.4rem;
      color: #333;
      line-height: 1;
      margin-left: 0.266667rem;
      margin-right: 0.4rem;
    }
  }

  .gfgg {
    height: 3.28rem;
    justify-content: space-between;
    .f-flex();
    padding-left: 0.533333rem;
    padding-right: 0.533333rem;
    img {
      width: 1.066667rem;
      height: 1.066667rem;
    }
    .bzzx {
      width: 2.106667rem;
      color: #10131e;
      font-size: 0.373333rem;
      text-decoration: none;
      p {
        padding-top: 0.266667rem;
      }
    }
  }
  .i_paihang {
    .title {
      color: #10131e;
      font-size: 0.44rem;
      font-weight: 700;
      height: 1.2rem;
      line-height: 1.2rem;
      padding-left: 0.4rem;
      border-bottom: 1px solid #e7e8ee;
      text-align: left;
    }
    .mian {
      .a-title {
        line-height: 1.2;
        .f-flex();
        justify-content: space-between;
        .f-padding();
        height: 1.013333rem;
        font-size: 0.4rem;
        border-top: 1px solid #e9ebf3;
        border-bottom: 1px solid #e9ebf3;
        font-size: 0.32rem;
        text-align: left;
        .cell-4 {
          flex-basis: 33.33333333%;
          max-width: 33.33333333%;
          width: auto;
        }
        .cell-3 {
          flex-basis: 25%;
          max-width: 25%;
          width: auto !important;
        }
        .cell-5 {
          flex-basis: 41.66666667%;
          max-width: 41.66666667%;
          width: auto !important;
        }
      }
      .content {
        line-height: 1.2;
        margin-top: 10px;
        .b-title {
          margin-bottom: 0.4rem;
          height: 1.2rem;
          .f-flex();
          justify-content: space-between;
          .f-padding();
          font-size: 0.4rem;
          font-size: 0.32rem;
          text-align: left;
          padding: 0.3rem 0.4rem;
          .hq {
            float: left;
          }
          .cell-4 {
            flex-basis: 33.33333333%;
            max-width: 33.33333333%;
            width: auto;
            .f1 {
              font-weight: bold;
              font-size: 0.4rem;
            }
            .f2 {
              color: #737a92;
              font-size: 0.3rem;
            }
            .f3 {
              color: #737a92;
              font-size: 0.31rem;
            }
          }
          .cell-3 {
            flex-basis: 25%;
            max-width: 25%;
            width: auto !important;
            .red-btn {
              background-color: #c7cce6;
              display: block;
              border-radius: 4px;
              width: 2rem;
              height: 0.933333rem;
              line-height: 0.933333rem;
              text-align: center;
              color: #fff;
            }
            .red-btn.active {
              background-color: #e66b41;
            }
          }
          .cell-5 {
            flex-basis: 41.66666667%;
            max-width: 41.66666667%;
            width: auto !important;
            .f1 {
              font-weight: bold;
              font-size: 0.4rem;
            }
            .f2 {
              color: #737a92;
              font-size: 0.31rem;
            }
          }
        }
      }
    }
  }
}
</style>

